/**
 * 本文件用来处理表单绑定的数据，以及表单的验证
 */

import { reactive, ref } from 'vue'
import { ElForm } from 'element-plus';
// 引入登录请求参数（就是form表单绑定的数据）的类型声明
import { LoginParm } from '@/api/user/UserModel'

export default function useBaseLogin() {
  // 表单的ref属性这里首先给loginFormRef这个变量赋值为具体的元素
  const loginFormRef = ref<InstanceType<typeof ElForm>>();
  // 自己写如果找不到类型，就可以使用any这个万金油
  // 自定义的组件如果使用了其他的方式写，很有可能会打包报错，造成错误
  // 一般就会采用第一种方式
  // const addDeptRef = ref<{ show: (type: string, row?: DeptModel) => void }>()
  // 下面这种方式在打包的时候会报错
  // const addDeptRef = ref<InstanceType<typeof AddAndEdit>>()
  // const loginFormRef = ref<any>();
  // 表单绑定的数据
  const loginModel = reactive<LoginParm>({
    username: 'admin',
    password: '1234',
    code: ''
  })
  const rules = reactive({
    username: [{
      required: true,
      trigger: 'change',
      message: '请填写登录账户'
    }],
    password: [{
      required: true,
      trigger: 'change',
      message: '请填写登录密码'
    }],
    code: [{
      required: true,
      trigger: 'change',
      message: '请填写验证码'
    }]
  })
  return {
    loginModel,
    rules,
    loginFormRef
  }
}